<template>
  <div class="HomeTable">
    <el-card>
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
        highlight-current-row
        height="calc(100vh - 350px)"
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column label="日期" width="120">
          <template slot-scope="scope">{{ scope.row.id }}</template>
        </el-table-column>
        <el-table-column prop="name" label="姓名" width="120">
        </el-table-column>
        <el-table-column prop="data" label="地址" show-overflow-tooltip>
        </el-table-column>
      </el-table>
      <div style="margin-top: 20px">
        <el-button @click="toggleSelection()">取消选择</el-button>
      </div>
    </el-card>
  </div>
</template>

<script>
import { mapState } from "vuex";
import { homeTable2, homeTable } from "@/api/index";
export default {
  data() {
    return {
      tableData: [],
      multipleSelection: [],
    };
  },
  computed: {
    ...mapState(["homeTree"]),
  },
  watch: {
    //监听首页树节点选中数据
    deep: true,
    immediate: false,
    homeTree: {
      async handler(val) {
        if (val == "三级 1-1-1") {
          let [err, res] = await homeTable2();
          if (!err) {
            // if (res.code == 200) {
              this.tableData = res;
            // }
          }
        }
      },
    },
  },

  async mounted() {
    //初始化首页表格数据
    let [err, res] = await homeTable();
    this.tableData = res;
  },

  methods: {
    //取消按钮
    toggleSelection() {
      this.$refs.multipleTable.clearSelection();
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
  },
};
</script>

<style lang="less" scoped>
</style>